<template>
  <div class="login-container">
    <van-nav-bar
      class="app-nav-bar"
      title="登录"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 登录表单 -->
    <van-form @submit="onLogin">
      <van-cell-group>
        <van-field
          v-model="user.mobile"
          clearable
          left-icon="phone-o"
          placeholder="请输入手机号"
        />
        <van-field
          v-model="user.code"
          center
          clearable
          left-icon="medal-o"
          placeholder="请输入验证码">
          <template #button>
            <van-button size="small">发送验证码</van-button>
          </template>
        </van-field>
      </van-cell-group>

      <!-- 登录 -->
      <div class="login-btn-wrap">
        <van-button class="login-btn" type="info" block>登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login } from '@/api/user'

export default {
  name: 'LoginIndex',
  data () {
    return {
      user: {
        mobile: '', // 手机号
        code: '' // 验证码
      }
    }
  },
  methods: {
    async onLogin () {
      const res = await login(this.user)
      console.log(res)
    }
  }
}
</script>

<style scoped lang="less">
.login-container {
  .send-btn {
    width: 76px;
    height: 23px;
    background-color: #ededed;
    .van-button__text {
      font-size: 11px;
      color: #666666;
    }
  }
  .login-btn-wrap {
    padding: 26px 16px;
    .login-btn {
      background-color: #6db4fb;
      border: none;
      .van-button__text {
        font-size: 15px;
      }
    }
  }
}
</style>
